<template>
	<view class="container">
		<swiper class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration" circular="true">
		    <swiper-item>
		        <image class="swiper-item" src="../../static/img/jc.jpg"></image>
		    </swiper-item>
			<swiper-item>
			    <image class="swiper-item" src="../../static/img/fq.jpg"></image>
			</swiper-item>
			<swiper-item>
			    <image class="swiper-item" src="../../static/img/jt.jpg"></image>
			</swiper-item>
		</swiper>
		<!-- 商品简介 -->
		<view class="introduce">
			<div class="price">
				<span class="newPrice">¥9.90</span>
				<span class="oldPrice">¥10.80</span>
			</div>
			<div class="introduceText">
				<span class="textHeadr">风祥冷冻鸡翅中&nbsp;&nbsp;400g</span>
				<span class="introduceDetail">小朋友喜欢的香嫩，无激素添加才放心</span>
			</div>
		</view>
		<view class="brand">
			<div class="attribute">
				<div class="name">鸡中翅</div>
				<div class="value">品种</div>
			</div>
			<div class="attribute">
				<div class="name">冷冻</div>
				<div class="value">储存条件</div>
			</div>
			<div class="attribute">
				<div class="name">香嫩多汁</div>
				<div class="value">推荐理由</div>
			</div>
			<div class="attribute">
				<div class="name">可烤可烧</div>
				<div class="value">推荐理由</div>
			</div>
		</view>
		<!-- 配送 -->
		<view class="distribution_coupons">
			<div class="distributionTime">
				<span class="distribution">配送</span>
				<span class="time">最快11:30-12:00送达</span>
			</div>
			<div class="coupons" >
				<span style="font-size: 32rpx;">领券</span>
				<scroll-view scroll-x="true" enable-flex="true" class="scroll">
					<div class="couponCard">满99.00减10</div>
					<div class="couponCard">满79.00减8</div>
					<div class="couponCard">满69.00减6</div>
					<div class="couponCard">满59.00减5</div>
				</scroll-view>
				<span class="more">></span>
			</div>
		</view>
		<!-- 规格 -->
		<view class="specifications">
			<span style="font-size: 38rpx;font-weight: bold;padding-left: 20rpx;">规格</span>
			<div class="attribute">
				<span>净含量</span>
				<span>400g</span>
			</div>
			<div class="attribute">
				<span>保存条件</span>
				<span>冷冻</span>
			</div>
			<div class="attribute">
				<span>保质期</span>
				<span>18个月</span>
			</div>
		</view>
		<image src="../../static/img/spDetail1.jpg" style="height: 1100rpx;margin-top: 20rpx;"></image>
		<image src="../../static/img/spDetail2.jpg" style="height: 900rpx;"></image>
		<image src="../../static/img/spDetail3.jpg" style="height: 1200rpx;"></image>
		<image src="../../static/img/spDetail4.jpg" style="height: 1000rpx;"></image>
		<div class="after-sales">
			<div class="after-sales1">
				<span class="green">我们的使命</span>
				<span class="grey">让美好的食材像自来水一样触手可得，普惠万众</span>
			</div>
			<div class="after-sales2">
				<u-icon name="search" color="#18B566" size="60"></u-icon>
				<div class="titleText">
					<div class="title">新鲜食材</div>
					<div class="text">7+1品控流程</div>
					<div class="text">层层把控，是我们放心给家人吃的品质</div>
				</div>
			</div>
			<div class="after-sales2">
				<u-icon name="car" color="#18B566" size="60"></u-icon>
				<div class="titleText">
					<div class="title">全程冷链</div>
					<div class="text">从源头到餐桌</div>
					<div class="text">让你像当地人一样享受食材的原汁原味</div>
				</div>
			</div>
			<div class="after-sales2" style="border-bottom: none;">
				<u-icon name="account" color="#18B566" size="60"></u-icon>
				<div class="titleText">
					<div class="title">售后无忧</div>
					<div class="text" style="color: #333;">贴心服务</div>
					<div class="text">生鲜商品在收货内24小时内，非生鲜类商品在收货48小时内可申请退换货</div>
				</div>
			</div>
		</div>
		<guessLike></guessLike>
		<view class="addCart">
			<u-icon name="shopping-cart" color="#909399" size="60"></u-icon>
			<u-button size="medium" type="success" shape="circle">加入购物车</u-button>
		</view>
	</view>
</template>

<script>
	import guessLike from '../../components/guessLike.vue'
	export default {
		data() {
			return {
				autoplay:true,
				duration:500,
				interval:1000
			};
		},
		components:{
			"guessLike":guessLike
		}
	}
</script>

<style lang="scss">
.container{
	background: #fafafa;
	.swiper{
		height: 600rpx;
		.swiper-item{
			height: 600rpx;
		}
	}
	//商品简介
	.introduce{
		background: #fff;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 30rpx;
		.price{
			margin-left: 20rpx;
			margin-top: 30rpx;
			.newPrice{
				color: #DD524D;
				font-size: 42rpx;
			}
			.oldPrice{
				color: #C0C0C0;
				font-size: 28rpx;
				margin-left: 20rpx;
				text-decoration: line-through;
			}
		}
		.introduceText{
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			.textHeadr{
				font-size: 42rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.introduceDetail{
				font-size: 32rpx;
				color: #C0C0C0;
			}
		}
	}
	.brand{
		padding-bottom: 30rpx;
		background: #fff;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		.attribute{
			padding-right: 30rpx;
			padding-left: 30rpx;
			margin-top: 40rpx;
			border-right: 1px solid #DCDFE6;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			.name{
				font-size: 34rpx;
				color: #333;
			}
			.value{
				font-size: 30rpx;
				color: #C0C0C0;
				margin-top: 20rpx;
			}
		}
	}
	//配送及优惠券
	.distribution_coupons{
		padding-bottom: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-top: 30rpx;
		.distributionTime{
			.distribution{
				margin-left: 20rpx;
				font-size: 32rpx;
			}
			.time{
				color: #18B566;
				margin-left: 50rpx;
				font-size: 32rpx;
			}
		}
		.coupons{
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			height: 50rpx;
			.coupons>span{
				font-size: 32rpx;
				width: 40rpx;
			}
			.scroll{
				display: flex;
				height: 60rpx;
				width: 600rpx;
				margin-left: 10rpx;
				.couponCard{
					margin-right: 10rpx;
					width: 150rpx;
					background-color: #ECF5FF;
					border: 1px #A0CFFF solid;
					font-size: 24rpx;
					height: 35rpx;
					line-height: 35rpx;
					border-radius: 10rpx;
					margin-top: 15rpx;
				}
			}
			.more{
				color: #8F8F94;
			}
		}
	}
	//规格
	.specifications{
		margin-top: 30rpx;
		background: #fff;
		padding-top: 20rpx;
		padding-bottom: 30rpx;
		.attribute{
			margin-top: 30rpx;
			padding: 30rpx 400rpx 10rpx 20rpx;
			border-top: 1px dashed #DCDFE6;
			display: flex;
			justify-content: space-between;
			span{
				color: #82848A;
				font-size: 32rpx;
			}
		}
	}
	.after-sales{
		background: #fff;
		padding-top: 150rpx;
		.after-sales1{
			display: flex;
			flex-direction: column;
			align-items: center;
			.green{
				font-size: 50rpx;
				font-weight: bold;
				color: green;
			}
			.grey{
				font-size: 24rpx;
				margin-top: 20rpx;
				color: #C0C0C0;
				width: 260rpx;
			}
		}
	}
	.after-sales2{
		padding: 30rpx 40rpx;
		display: flex;
		border-bottom: 1px dashed #C0C0C0;
		.titleText{
			margin-bottom: 30rpx;
			margin-left: 30rpx;
			.title{
				color: green;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.text{
				font-size: 24rpx;
				color: #C0C0C0;
			}
	    }
	}
	//加购
	.addCart{
		box-sizing: border-box;
		width: 100%;
		background: #fff;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
	}
		
}
</style>
